<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";

const tableData = [
  {
    id: "1",
    temperature: "36.3℃",
    img: "https://i.imgtg.com/2022/09/26/g2IjP.jpg",
    time: "2022-03-03T08:53:07",
  },
  {
    id: "1",
    temperature: "36.3℃",
    img: "https://i.imgtg.com/2022/09/26/g2IjP.jpg",
    time: "2022-03-03T08:53:07",
  },
  {
    id: "1",
    temperature: "36.3℃",
    img: "https://i.imgtg.com/2022/09/26/g2IjP.jpg",
    time: "2022-03-03T08:53:07",
  },
  {
    id: "1",
    temperature: "36.3℃",
    img: "https://i.imgtg.com/2022/09/26/g2IjP.jpg",
    time: "2022-03-03T08:53:07",
  },
  {
    id: "1",
    temperature: "36.3℃",
    img: "https://i.imgtg.com/2022/09/26/g2IjP.jpg",
    time: "2022-03-03T08:53:07",
  },
  {
    id: "1",
    temperature: "36.3℃",
    img: "https://i.imgtg.com/2022/09/26/g2IjP.jpg",
    time: "2022-03-03T08:53:07",
  },
];

const column = ref([
  { prop: "id", label: "编号", width: "180" },
  { prop: "temperature", label: "体温", width: "180" },
  { prop: "time", label: "时间" },
]);

const dialog = reactive({
  title: "设置",
  visible: false,
  form: {
    data: {
      threshold: "",
      monitorTime: "",
    },
  },
  preservation() {
    dialog.visible = false;
    ElMessage({
      type: "success",
      message: "保存成功",
    });
  },
});
</script>

<template>
  <el-button
    class="mb-4 w-20"
    size="large"
    type="primary"
    @click="dialog.visible = true"
  >
    设置
  </el-button>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="item in column"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
    />
    <el-table-column label="抓图">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 64px"
          :src="scope.row.img"
          fit="cover"
        />
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialog.visible" :title="dialog.title">
    <el-form :model="dialog.form.data" status-icon>
      <el-form-item label="监测阈值">
        <el-input
          v-model="dialog.form.data.threshold"
          placeholder="请输入监测阈值"
        />
      </el-form-item>
      <el-form-item label="监测时间">
        <el-input
          v-model="dialog.form.data.monitorTime"
          placeholder="请输入监测时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button @click="dialog.preservation()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
